<template>
	<jk-view :loading="showLoading">
		<jk-operation-card class="margin-bottom-10 margin-top-10 width-100-percent fixed-operation-bar">
			<div class="flex-between-center">
				<div>
					<span class="el-icon-star-off item-gap"></span>
					<span>{{ ruleForm.code }}</span>
					<el-tag v-show="ruleForm.id" size="mini" type="info" class="margin-left-10">
						<jk-common-status :status="ruleForm.auditState"></jk-common-status>
					</el-tag>
				</div>
				<div class="flex-end-center">
					<el-button type="info" plain icon="el-icon-back" size="small" class="item-gap" @click="onJumpList">返回列表</el-button>
					<jk-save-button v-if="pageType === 'add'" :loading="saveBtnLoading" class="item-gap" :permission-prefix="prefix" @click="onConfirmBtn(0)"></jk-save-button>
					<jk-update-button v-if="pageType === 'edit'" :disabled="ruleForm.auditState === 1 || ruleForm.auditState === null" :permission-prefix="prefix" :loading="saveBtnLoading" class="item-gap" @click="onConfirmBtn(1)"></jk-update-button>
					<!--<div v-if="pageType === 'detail'" class="item-gap"><jk-button :disabled="ruleForm.auditState === 1 || ruleForm.auditState === null" type="primary" icon="el-icon-edit" size="small" @click="onEditBtn">编辑</jk-button></div>-->
					<!--<div v-if="pageType !== 'detail'" class="item-gap"><jk-button :disabled="ruleForm.auditState === 1 || ruleForm.auditState === null" :loading="saveAndEnableBtnLoading" type="primary" icon="el-icon-document-checked" size="small" @click="onConfirmBtn(2)">{{ ruleForm.id ? '更新' : '保存' }}并启用</jk-button></div>-->
					<!--<jk-button v-if="(pageType === 'detail' || pageType === 'edit') && ruleForm.auditState === 1" :loading="auditStateLoading" :type="ruleForm.auditState === 1 ? 'warning' : 'success'" class="pointer item-gap" :icon="ruleForm.auditState ? 'el-icon-video-pause' : 'el-icon-video-play'" size="small" @click="onAuditStateChange">{{ ruleForm.auditState === 0 ? '启用': '停用' }}</jk-button>-->
				</div>
			</div>
		</jk-operation-card>
		<jk-card>
			<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" :show-message="false">
				<div ref="box3">
					<el-tag type="primary" effect="plain" class="margin-bottom-10">
						<span class="el-icon-tickets item-gap"></span>
						<span>基本信息</span>
					</el-tag>
					<el-row ref="box1">
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="生产区域" prop="workshopId">
								<el-select v-model="ruleForm.workshopId" placeholder="生产区域" clearable class="width-100-percent">
									<el-option v-for="item in workshopList" :key="item.id" :label="item.name" :value="item.id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="品种" prop="productId">
								<remote-search-product-input
									placeholder="品种"
									only-key="productId"
									query-name="productName"
									:form-data="ruleForm"
									@on-select="onSelectProductChange"
								></remote-search-product-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="配棉批号" prop="batchId">
								<remote-search-batch-code-input
									:disabled="!ruleForm.productId"
									placeholder="配棉批号"
									only-key="batchId"
									query-name="batchCode"
									:form-data="ruleForm"
									@on-select="onSelectBatchChange"
								></remote-search-batch-code-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="版本号">
								<el-input v-model="ruleForm.version" disabled placeholder="" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="配棉日期" prop="date">
								<el-date-picker v-model="ruleForm.date" clearable type="date" style="width: 100%;" value-format="yyyy-MM-dd" placeholder="配棉日期" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="配棉员" prop="userId">
								<remote-search-emp-input
									placeholder="配棉员"
									only-key="userId"
									query-name="userName"
									:form-data="ruleForm"
									@on-select="onSelectEmpChange"
								></remote-search-emp-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item class="margin-bottom-10" label="备注">
								<el-input v-model="ruleForm.remark" type="textarea" :rows="1" placeholder="" />
							</el-form-item>
						</el-col>
					</el-row>
				</div>
				<el-button type="primary" icon="el-icon-plus" size="mini" class="margin-bottom-4" @click="onAddBtn">原料明细</el-button>
				<el-row>
					<el-col :span="24">
						<jk-table ref="jkTable" :data="tableData" border :height="500" style="width: 100%">
							<vxe-table-column field="ratio" title="操作" :width="70" align="center">
								<template slot-scope="scope">
									<el-button icon="el-icon-delete" type="text" size="mini" @click="tableData.splice(scope.rowIndex, 1)" />
								</template>
							</vxe-table-column>
							<vxe-table-column type="seq" title="序号" width="70" align="center" />
							<vxe-table-column field="productCode" title="原料编号" :width="110" align="left"></vxe-table-column>
							<vxe-table-column field="productName" title="原料名称" align="left"></vxe-table-column>
							<vxe-table-column field="productModels" title="规格" align="right"></vxe-table-column>
							<vxe-table-column field="unitName" title="单位" align="right"></vxe-table-column>
							<vxe-table-column field="ratio" title="比例%" :width="120" align="right">
								<template slot-scope="scope">
									<jk-number-input v-model="scope.row.ratio" size="mini" placeholder=""></jk-number-input>
								</template>
							</vxe-table-column>
						</jk-table>
					</el-col>
				</el-row>
			</el-form>
			<checkbox-product-dialog
				:default-select-rows="tableData"
				default-stock-type="RAW_MATERIAL"
				check-key-name="productId"
				:dialog-state="checkboxProductDialogState"
				@on-confirm="onConfirmBtnOfCheckBoxProductDialog"
				@on-visible-change="onVisibleChangeOfCheckBoxProductDialog"
			></checkbox-product-dialog>
		</jk-card>
	</jk-view>
</template>

<script>
    import orderFormMixin from './form-mixin';
    export default {
        name: 'FormBox',
        mixins: [orderFormMixin],
        props: {
        },
        data() {
            return {
            };
        },
        methods: {
        },
        mounted() {
            this.getDependentData();
        },
        watch: {
        }
    };
</script>

